import React from "react";
import 'antd/dist/antd.css';
import Link from 'umi/link';
import { Layout, Menu, Icon, LocaleProvider } from 'antd';
import logo from "../../assets/edoc.png";
// 由于 antd 组件默认文案是英文，所以需要修改为中文。
import zhCN from 'antd/lib/locale-provider/zh_CN';
import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('zh-cn');

const { Header, Content, Footer, Sider, } = Layout;
const SubMenu = Menu.SubMenu;

class HorizontalLayout extends React.Component {  //水平部布局
    state = {
        collapsed: false,
    };

    onCollapse = (collapsed) => {
        console.log(collapsed);
        this.setState({ collapsed });
    }

    render() {
        return (
            <LocaleProvider locale={zhCN}>
                <Layout style={{ minHeight: '100vh', height: "100%" }}>
                    <Sider
                        collapsible
                        collapsed={this.state.collapsed}
                        onCollapse={this.onCollapse}
                    >
                        <div style={{ margin: "16px", height: "40px", background: `url(${logo}) rgba(255,255,255,.2) no-repeat center 0` }} />
                        <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
                            <Menu.Item key="1">
                                <Link to={`${this.props.route.path}/`}>
                                    <Icon type="pie-chart" />
                                    <span>Home</span>
                                </Link>
                            </Menu.Item>
                            <Menu.Item key="2">
                                <Link to={`${this.props.route.path}/component/data`}>
                                    <Icon type="desktop" />
                                    <span>DATA</span>
                                </Link>
                            </Menu.Item>
                            <SubMenu
                                key="sub1"
                                title={<span><Icon type="user" /><span>User</span></span>}
                            >
                                <Menu.Item key="3"><Link to={`${this.props.route.path}/component/tom`}>Tom</Link></Menu.Item>
                                <Menu.Item key="4">Bill</Menu.Item>
                                <Menu.Item key="5">Alex</Menu.Item>
                            </SubMenu>
                            <SubMenu
                                key="sub2"
                                title={<span><Icon type="team" /><span>Team</span></span>}
                            >
                                <Menu.Item key="6">Team 1</Menu.Item>
                                <Menu.Item key="8">Team 2</Menu.Item>
                            </SubMenu>
                            <Menu.Item key="9">
                                <Icon type="file" />
                                <span>File</span>
                            </Menu.Item>
                        </Menu>
                    </Sider>
                    <Layout>

                        <Header style={{ background: '#fff', padding: 0 }} ><h1 style={{ textAlign: "center", fontSize: "30px" }}>This is Header</h1></Header>
                        {/* {true && <></>} */}
                        {(!!window.ActiveXObject || "ActiveXObject" in window) ? //此处判断是否是IE  IE样式特殊
                            <Layout style={{ margin: '16px' }}>   {/*  此处写Content IE会报错 组件名必须大写 */}
                                <div style={{ padding: 24, background: '#fff', minHeight: 360 }}>
                                    {this.props.children}
                                </div>
                            </Layout> :
                            <div>
                                <Content style={{ margin: '16px' }}>
                                    <div style={{ padding: 24, background: '#fff', minHeight: 360 }}>
                                        {this.props.children}
                                    </div>
                                </Content>
                            </div>
                        }
                        <Footer style={{ textAlign: 'center' }}> Ant Design ©2018 Created by Ant UED </Footer>

                    </Layout>
                </Layout>
            </LocaleProvider>
        );
    }
}

export default HorizontalLayout;